<template>
  <div class="content" style="position: relative">
    <div class="bu-click left-click" @click="handClickLeft">
      <img src="../../assets/image/left.png" />
    </div>
    <div
      :style="{ '--width': width, '--height': height }"
      class="chart-wrapper"
    >
      <!-- <div @click="handleClickLeft">左边</div> -->

      <div
        ref="wrapper"
        class="wrapper"
        :id="id"
        :style="{ width: 80 * data.length + 'px', height: 'calc(100%)' }"
      />
    </div>
    <div class="bu-click right-click" @click="handClickRight">
      <img src="../../assets/image/right.png" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    eachColor: {
      type: String,
      default: () => '#15C0E6'
    },
    id: {
      type: String,
      default: () => 'content'
    },
    xType: {
      type: String,
      default: () => 'category'
    },
    yType: {
      type: String,
      default: () => 'value'
    },
    width: {
      type: String,
      default: () => '185.0px'
    },
    height: {
      type: String,
      default: () => '126.0px'
    },
    data: {
      type: Array,
      default: () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 14, 16]
    }
  },
  data() {
    return {
      scrollDistance: 0
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    handClickRight() {
      console.log(this.$refs.wrapper)
      // this.$refs.wrapper.scrollLeft = 100

      if (Math.abs(this.scrollDistance) < (this.data.length / 3) * 80) {
        this.scrollDistance -= 200
        console.log(Math.abs(this.scrollDistance))
        this.$refs.wrapper.style.transform = `translateX(${this.scrollDistance}px)`
      }
    },
    handClickLeft() {
      console.log(this.$refs.wrapper)
      // this.$refs.wrapper.scrollLeft = 100
      if (this.scrollDistance < 0) {
        this.scrollDistance += 200
        this.$refs.wrapper.style.transform = `translateX(${this.scrollDistance}px)`
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption({
        title: { undefined, show: false },
        color: [this.eachColor, '#00C720'],
        tooltip: {
          trigger: 'axis',
          // trigger: 'item',
          textStyle: {
            fontSize: 10
          },
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999',
              fontSize: 13
            }
          },
          position: (pos, params, dom, rect, size) => {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            var obj = { top: 60 }
            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
            return obj
          }
        },
        grid: {
          // 图表和父盒子之间的距离
          left: '0%',
          right: '10%',
          bottom: '2%',
          top: '2%',
          containLabel: true
        },
        legend: {
          // 图例
          top: '5%',
          right: '8%',
          itemHeight: 14,
          itemWidth: 30,
          data: [
            {
              name: '任务执行情况',
              textStyle: {
                color: '#1D2129',
                fontWeight: '400',
                fontSize: '14px'
              }
            }
            // {
            //   name: '任务执行失败',
            //   textStyle: {
            //     color: '#666666'
            //   }
            // }
          ]
        },
        xAxis: {
          // x轴
          type: this.xType,
          data: this.data,
          axisLabel: {
            interval: 0,
            formatter: (params) => {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = window.innerWidth > 1920 ? 6 : 5 // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            },
            textStyle: {
              color: '#3F4E65', // 文字的颜色
              fontWeight: 400,
              fontSize: 12
            },
            margin: 9
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E8ECF6'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: this.yType,
          show: false,
          axisLabel: {
            // x轴的坐标文字
            show: true,
            margin: 13,
            width: 60,
            textStyle: {
              color: '#3F4E65', // 文字的颜色
              fontSize: 14,
              fontWeight: 400
            }
          },
          minInterval: 2, // 显示最小刻度
          //   max: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            // 坐标在grid区域的分割线
            lineStyle: {
              // 设置分割线的样式(图表横线颜色)
              color: '#E8ECF6',
              type: 'solid'
            }
          }
        },
        series: [
          {
            // name: '任务执行情况',
            type: 'bar', // 柱状图
            data: this.data,
            barGap: '100%', // 柱间间距
            barWidth: '16.0px', // 柱状体的宽度
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(233, 237, 247, 1)',
              borderRadius: [10, 10, 10, 10]
            },
            itemStyle: {
              borderRadius: [10, 10, 10, 10]
            }
          }
        ]
      })
      // 让图表自适应
      window.addEventListener('resize', () => {
        myChart.resize() // myChart 是实例对象
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .chart-wrapper {
    width: var(--width) !important;
    height: var(--height) !important;
    overflow-x: hidden;
    overflow-y: hidden;
    transition-delay: 0.5s;
    transition: 0.5s;
    position: relative;
    .wrapper {
      transition-delay: 0.5s;
      transition: 0.5s;
    }
  }

  .bu-click {
    width: 24px;
    height: 24px;
    background: #e5efff;
    opacity: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
  }
  .left-click {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    z-index: 9;
  }
  .right-click {
    position: absolute;
    top: 50%;
    right: -15px;
    z-index: 99;
    transform: translateY(-50%);
  }
}
</style>
